<template>
  <m-modal
    v-model="visible"
    title="选择属性"
    okText="确定"
    :width="540"
    :confirmDisabled="checkItem.size <= 0 && !selectedItem"
    @ok="handleOk"
    @cancel="handleCancel">
    <div class="v-select-property">
      <div class="v-attr-tip" >
        <div class="flex">
          <img src="statics/icons/simulation/attribute.png" alt="" >
          <div class="g-fs-14 g-bolder g-m-l-4">选择属性</div>
        </div>
        <div class="g-m-t-10 g-fs-12 g-m-l-5">
          请从列表中选择属性。若要查找属性，请在“按名称进行搜索的内容”框中键入文本。
        </div>
      </div>
      <main>
        <div class="g-jc-sb _header g-flex-0">
          <div class="g-ai-c">
            <span style="font-size:12px; line-height: 16px">排序：</span>
            <span class="_sort _img-btn" :class="{'_sort-active':sortActive}" @click="handleSort">
              <img src='statics/icons/app/textsort.png'/>
            </span>
          </div>
          <div class="g-ai-c _button-area">
            <a-input-search placeholder="搜索关键字" style="width: 256px" @change="onKeywordChange" />
          </div>
        </div>
        <a-table
          class="_table-area"
          :columns="columns"
          :data-source="tableDta"
          :pagination="false"
          :rowClassName="filterData"
          :scroll = "{y: 200}"
          :bordered="true">
          <div slot="value" slot-scope="text, record">
            <a-checkbox v-if="record.type === 'checkbox'" :checked="checkItem.has(record.name)" @change="(e) => onCheckChange(e, record)">
              {{text}}
            </a-checkbox>
            <a-radio v-if="record.type === 'radio'" :checked="selectedKey === record.key" @change="(e) => onRadioChange(e, record)">
              {{text}}
            </a-radio>
          </div>
        </a-table>
      </main>
    </div>

  </m-modal>
</template>
<script>
import { Portal } from 'src/components/common/Portal.vue';
import Modal from 'src/components/common/CustomModal';
import { SysMLUtilHelper } from 'src/api/sysml-imports';

const columns = [
  {
    title: '名称',
    dataIndex: 'name',
    key: 'name',
    width: 100
  },
  {
    title: '',
    dataIndex: 'value',
    key: 'value',
    scopedSlots: { customRender: 'value' },
  }
];

const comp = {
  name: 'comp-select-property',
  components: {
    'm-modal': Modal,
    //// 'm-attribute': Attribute
  },
  props: {
    graphNode: Object,
    selectedItemKeys: Array,
    type: String,
    dataList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      visible: false,
      sortActive: false,
      columns,
      checkItem: new Set(),
      selectedKey: '',
      selectedItem: null,
      keyword: '',
    };
  },
  created() {
    this.initDataList();
  },
  mounted(){
    this.visible = true;
  },
  computed: {
    tableDta() {
      const reg = new RegExp(this.keyword.trim(), 'i');
      let filteredData = [];
      if (this.keyword) {
        this.dataList.forEach(item => {
          const currentItem = { ...item };
          currentItem.show = reg.test(item.name);
          filteredData.push(currentItem);
        });
      } else {
        this.dataList.forEach(item => {
          filteredData.push(item);
        });
      }
      if (this.sortActive) {
        filteredData.sort((a, b) => ('' + a.name).localeCompare(b.name));
      }
      return filteredData;
    }
  },

  methods: {
    initDataList() {
      const checkItem = new Set();
      this.dataList.forEach(data => {
        data.type = this.type;
        data.show = true;
        if (this.selectedItemKeys.includes(data.name)) {
          this.selectedKey = data.key;
          if (this.type === 'radio') {
            this.selectedItem = data;
          } else if (this.type === 'checkbox') {
            checkItem.add(data.name);
          }
        }
      });
      this.checkItem = checkItem;
    },
    //// 筛选数据
    filterData(record) {
      if (!record.show) {
        return 'hide-row';
      }
      return '';
    },

    handleCancel(){
      this.visible = false;
      this.$emit('close');
    },
    handleOk(){
      this.visible = false;
      this.$emit('sure', {
        selectedItem: this.selectedItem, 
        checkItem: [...this.checkItem], 
      });
    },

    handleSort() {
      this.sortActive = !this.sortActive;
    },

    onSearch() {},

    onCheckChange(e, record) {
      console.log('record', record);
      const isChecked = e.target.checked;
      const name = record.name;
      const checkItem = new Set([...this.checkItem]);
      if (isChecked) {
        checkItem.add(name);
      } else {
        checkItem.delete(name);
      }
      this.checkItem = checkItem;
      console.log('this.checkItem', this.checkItem);
    },

    onRadioChange(e, record) {
      this.selectedKey = record.key;
      this.selectedItem = record;
    },

    onKeywordChange(e) {
      this.keyword = e.target.value;
    }
  }
};
export default comp;
export const selectProperty = new Portal(comp, { single: true });
export const portal = selectProperty;

</script>
<style lang="scss">
.v-select-property {
  .v-attr-tip {
	background-image: url(~statics/images/draw/addtitlebg.png);
  padding-left: 19px;
  padding-top: 12px;
  height: 96px;
}
.flex{
  display: flex;
  align-items: center;
}
main {
  padding: 0 16px 15px;
  ._header {
    height: 42px;
    ._button-area {
      input {
        height: 24px;
      }
    }
	}
	._sort {
    vertical-align: middle;
		&._sort-active {
		  background: linear-gradient(180deg, #B9E3FF 0%, #47B3FF 55%, #80C8FE 100%);
      border: 1px solid #B1CEE2;
		}
	}
	._img-btn {
		display: inline-block;
		box-sizing: border-box;
		cursor: pointer;
		img {
			display: block;
			height: 14px;
			width: 14px;
		}
		&:hover {
      background: linear-gradient(180deg, #E7F5FE 0%, #B0DEFF 65%, #B2DDFD 100%);
      border: 1px solid #B1CEE2;
		}
		&:active {
      background: linear-gradient(180deg, #B9E3FF 0%, #47B3FF 55%, #80C8FE 100%);
      border: 1px solid #B1CEE2;
		}
  }
  ._table-area {
    margin-top: 5px;
    .ant-table-hide-scrollbar {
      margin-bottom: 0 !important;
      overflow: unset !important;
      table {
        border-radius: 0;
      }
      th {
         &:last-of-type {
           border-right-color: #E4E3E3 !important;
         }
       }
    }
    .hide-row {
      display: none;
    }
    .ant-table-body {
      overflow-y: auto !important;
    }
      table {
        border-color: #E4E3E3;
        font-size: 12px;
      }
      tr th {
        padding: 6px 10px;
        //// background: linear-gradient(180deg, #DAF0FC 0%, #FAFDFF 100%);
        border-color: #E4E3E3;
      }
      tr td {
        padding: 2px 10px;
        border-color: #E4E3E3;
      }
    }
}
}

</style>
